<script setup>
import { reactive, ref, onMounted } from "vue";
import { fbtypes, captcha, countys, feedback } from "@/api/index";
import { showFailToast, showSuccessToast } from "vant";
defineOptions({
  name: "Question"
});

// 响应式表单数据
const formData = ref({
  title: '',	//string	是	标题
  type_id: '',	//integer	是	问题类型ID
  contacts: '',	//	string	是	姓名
  mobile: '',	//	string	是	联系电话
  county: '',	//	integer	是	所属区县ID
  community: '',	//	string	是	小区名称
  content: '',	//	string	是	问题内容
  captcha: '',	//	string	是	验证码
  captchaid: '',	//	string	是	验证码id

});

// 类型选择
const type = ref('');
const showPicker_type = ref(false);
const columns_type = ref([]);
const fetchData_type = async () => {
  try {
    //API 请求
    const response = await fbtypes();
    console.log(response);

    columns_type.value = response.data.map(e => {
      return { text: e.name, value: e.id }
    });
  } catch (err) {
  } finally {
  }
};
// 在组件挂载时调用 fetchData
onMounted(fetchData_type);
const onConfirm_type = ({ selectedOptions }) => {
  type.value = selectedOptions[0]?.text;
  formData.value.type_id = selectedOptions[0]?.value;
  showPicker_type.value = false;
};

// 区域选择
const county = ref('');
const showPicker_county = ref(false);
const columns_county = ref([]);
// 获取区域列表 /api/index/countys
const fetchData_countys = async () => {
  try {
    //API 请求
    const response = await countys();
    console.log(response);

    columns_county.value = response.data.map(e => {
      return { text: e.name, value: e.id }
    });
  } catch (err) {
  } finally {
  }
};
// 在组件挂载时调用 fetchData
onMounted(fetchData_countys);
const onConfirm_county = ({ selectedOptions }) => {
  county.value = selectedOptions[0]?.text;
  formData.value.county = selectedOptions[0]?.value;
  showPicker_county.value = false;
};




// 获取验证码
const blobToBase64 = (blob) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(blob); // 将 Blob 转为 Base64
  });
};
const captchaImgData = ref('');
const fetchData_captcha = async () => {
  const randomPositiveNumber = Math.ceil(Math.random() * 100); // 生成 1-100 的随机正整数
  formData.value.captchaid = randomPositiveNumber
  try {
    //API 请求
    const response = await captcha({ id: randomPositiveNumber });
    console.log(response);
    // 将 Blob 转换为可用的 URL
    captchaImgData.value = URL.createObjectURL(response);
    // const base64Image = await blobToBase64(response);
    // console.log(base64Image); // Base64 格式
    // captchaImgData.value = base64Image
  } catch (err) {
  } finally {
  }
};
onMounted(fetchData_captcha);



const onSubmit = async (values) => {
  console.log('submit', formData.value);
  try {
    //API 请求
    const response = await feedback(formData.value);
    console.log(response);
    if(response.code == 1){
      showSuccessToast(response.msg);
      formData.value.captcha = ''
      fetchData_captcha()
    }else{
      showFailToast(response.msg);
    }

  } catch (err) {
  } finally {
  }
};
</script>

<template>
  
  <div class="form-container">
        <form>
            <div class="form-group required">
                <label for="title">标题：</label>
                <input type="text" id="title" placeholder="请输入标题">
            </div>

            <div class="form-group required">
                <label for="type">类型：</label>
                <select id="type">
                    <option value="">请选择</option>
                    <option value="1">类型1</option>
                    <option value="2">类型2</option>
                </select>
            </div>

            <div class="form-group">
                <label for="area">区县：</label>
                <select id="area">
                    <option value="">请选择</option>
                    <option value="1">区域1</option>
                    <option value="2">区域2</option>
                </select>
            </div>

            <div class="form-group required">
                <label for="community">小区：</label>
                <input type="text" id="community" placeholder="请输入小区">
            </div>

            <div class="form-group">
                <label for="name">姓名：</label>
                <input type="text" id="name" placeholder="请输入姓名">
            </div>

            <div class="form-group required">
                <label for="phone">电话：</label>
                <input type="text" id="phone" placeholder="请输入电话">
            </div>

            <div class="form-group">
                <label for="content">内容：</label>
                <textarea id="content" rows="5" placeholder="请输入内容 (1000字内)"></textarea>
            </div>

            <div class="form-group">
                <label for="captcha">验证码：</label>
                <div class="captcha">
                    <input type="text" id="captcha" placeholder="请输入验证码">
                    <img :src="captchaImgData" alt="验证码">
                </div>
                <small>看不清？点击验证码更换</small>
            </div>

            <div class="button-group">
                <button type="submit" class="submit">立即提交</button>
                <button type="reset" class="reset">重置</button>
            </div>
        </form>
    </div>
</template>
<style scoped>

::v-deep .van-field__control{
  /* background-color: #fff; */
}
::v-deep .van-cell {
  /* background: #f3f3f3; */
}

::v-deep .van-field__control{
  
  border: 2px solid var(--van-cell-border-color)
}


::v-deep .van-cell:after {
  border: 0px solid var(--van-cell-border-color)
}

.image-container {
  display: inline-block;
  overflow: hidden;
  width: 100px;
  /* 图片容器宽度 */
  height: 42px;
  /* 图片容器高度 */
}

.image {
  width: 100%;
  /* 图片宽度与容器一致 */
  height: 100%;
  /* 图片高度与容器一致 */
  object-fit: cover;
  /* 保持宽高比填充容器 */
  transition: transform 0.3s ease-in-out;
  /* 动画效果 */
}

.image:hover {
  /* transform: scale(1.5); */
  /* 放大 1.5 倍 */
}
</style>


<style>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f7f8fa;
    padding: 20px;
}

.form-container {
    max-width: 500px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.form-container h3 {
    margin-bottom: 20px;
    font-size: 18px;
}

.form-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.form-group label {
    flex: 0 0 60px; /* 固定宽度，可根据需要调整 */
    margin-bottom: 0;
    font-size: 14px;
    color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
    flex: 1; /* 填满剩余空间 */
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #1890ff;
    outline: none;
}

.form-group.required label::after {
    content: " *";
    color: red;
}

.captcha {
    display: flex;
    align-items: center;
}

.captcha img {
    margin-left: 10px;
    height: 40px;
}

.button-group {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.button-group button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.button-group .submit {
    background-color: #28a745;
    color: #fff;
}

.button-group .reset {
    background-color: #dc3545;
    color: #fff;
}
</style>